<template>
  <div class="evaluation">
    <span v-for="(item,index) in starArr" :key="index" :class="item" :style="{width:size+'px',height:size+'px'}"></span>
    <span class="grade" v-if="showGrade">{{grade}}</span>
  </div>
</template>

<script>
export default {
  props:{
    grade:{
      type:[Number,String],
      default:0
    },
    showGrade:{
      type:Boolean,
      default:false
    },
    size:{
      type:[Number,String],
      default:10
    }
  },
  computed:{
    starArr:function(){
      let arr = [];
      let grade = this.grade/2;
      while(arr.length !== 5){
        if(grade >= 0.75){
          arr.push('star')
          grade--;
        }else if(grade>=0.5){
          arr.push('halfstar')
          grade -= 0.5;
        }else{
          arr.push('nostar')
        }
      }
      return arr;
    }
  }
}
</script>

<style>
.evaluation{
  line-height: 0;
  font-size: 12px;
  color:rgba(0,0,0,.5)
}
.star,.halfstar,.nostar{
  display: inline-block;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.evaluation .star{
  background-image: url();
}

.evaluation .halfstar{
  background-image: url();
}
.evaluation .nostar{
  background-image: url();
}
.evaluation .grade{
  margin-left: 4px;
}
</style>